<template>
  <!-- 用户主页 -->
  <div class="index-container">
    <!-- header -->
    <div class="header">
      <div class="header-title">
        <div class="title-img">
          <img src="@/assets/img/common/logo.png" />
        </div>
        <el-button type="primary" size="mini" @click="logout">退出登录</el-button>
      </div>
      <!-- nav -->
      <div class="nav-box">
        <el-menu
          background-color="#3a62d7"
          class="nav"
          mode="horizontal"
          text-color="#fff"
          active-text-color="#409EFF"
          router
        >
          <el-menu-item class="nav-item" :index="item.path" v-for="item in formList" :key="item.id">{{
            item.title
          }}</el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- body -->
    <div class="body">
      <router-view></router-view>

      <!-- footer -->
      <div class="footer">
        <div class="describe">
          <div>版权所有 青岛恒星科技学院</div>
        </div>
        <div class="super-link">
          <a target="_blank" href="http://edu.shandong.gov.cn/">山东省教育厅</a>
          <a target="_blank" href="http://www.hx.cn/">青岛恒星科技学院官方网站</a>
          <a target="_blank" href="http://group.hx.cn/">恒星集团</a>
          <span>地址：山东省青岛市李沧区九水东路588号</span>
          <span>电话：0532-86661234</span>
          <span>邮编：266100</span>
          <span>E-mail：hx@hx.cn</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formList: [
        { id: 1, title: '首页', path: '/index' },
        { id: 2, title: '服务中心', path: '/serve' },
        { id: 5, title: '餐超消费', path: '/consume' },
        { id: 3, title: '规章制度', path: '/regular' },
        { id: 4, title: '新闻公告', path: '/news' },
        { id: 6, title: '服务说明', path: '/explain' }
      ]
    }
  },
  methods: {
    logout() {
      this.$router.push('/')
      window.sessionStorage.clear()
    }
  }
}
</script>

<style lang="less" scoped>
.index-container {
  .header {
    height: 90px;
    background-color: #3a62d7;
    padding: 0 20px;
    .header-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-img {
        width: 320px;
        height: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .el-button {
        height: 30px;
      }
    }
    .nav-box {
      height: 30px;
      .nav {
        border: none;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-menu-item {
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
  .body {
    padding: 20px 200px 0 200px;
    .footer {
      padding-top: 60px;
      .describe {
        color: #666;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .super-link {
        display: flex;
        justify-content: space-around;
        a,
        span {
          color: #666;
        }
        a {
          text-decoration: none;
        }
        a:hover {
          color: #3a62d7;
        }
      }
    }
  }
}
</style>
